<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,body {
						height: 100%;
						margin: 0px;
						font-family:PingFang-SC-Medium;
						padding: 0px;
					}
			
			
			.mui-content{
				position: relative;
				float: left;
				width: 100%;
				padding-bottom: 40px;
				background: #FFFFFF;
			
		          }
             a{
             color: #FFFFFF;	
             }
             a:active{
             	color: #FFFFFF;
             }
			 .mui-bar{
				 background: #FE635F;
				 
			 }
			 .mui-title{
				 
				 color: #FFFFFF;
			 }
			 .head{
				 position: relative;
				 float: left;
				 width: 100%;
                 margin-top:20px;
				 	padding: 0  15px;
				 box-sizing: border-box;
			 }
			 
			 .dan{
				 width: 107px;
				 height: 68px;
				 position: relative;
				 float: left;
				 margin-left: calc((100% - 321px)/3);
				 margin-top: 10px;
				 padding: 10px  10px;
				 box-sizing: border-box;
				 background:rgba(255,255,255,1);
border:1px solid rgba(255,201,200,1);
border-radius:4px;
			 }
			.dan>div:nth-child(1){
				 text-align: center;
				 position: relative;
				 float: left;
				 font-size:13px;
				 width: 100%;
                 font-weight:bold;
                 color:rgba(253,101,97,1);
				 line-height: 28px;
			} 
			 	.dan>div:nth-child(2){
			 	 text-align: center;
			 	 position: relative;
			 	 float: left;
			 	 font-size:12px;
			 	 width: 100%;
			      font-weight:bold;
			    color:rgba(102,102,102,1);
			 	 line-height: 20px;
			 } 
		.hang{
			position: relative;
			float: left;
			width: 100%;
			height: 10px;
			background:rgba(248,248,248,1);
			margin-top: 20px;
		}
		
		
		.chongzhis{
			position: relative;
			float: left;
			width: 100%;
			height: 58px;
			padding: 0  25px;
          box-sizing: border-box;
		}
		
		.chongzhis>img{
			position: relative;
			float: left;
			width: 22px;
			height: 22px;
			margin-top: 18px;
		}
		
		.chongzhis>div{
			position: relative;
			float: left;
			width: 200px;
			height: 100%;
			text-align: left;
			line-height: 58px;
			font-size:15px;
            font-weight:500;
            color:rgba(51,51,51,1);
            margin-left: 10px; 
		}	 
		.lastas{
			position: relative;
			float: left;
			width: 100%;
			padding: 0  15px;
			box-sizing: border-box;
		}
			.lastas>div{
				height: 44px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
border-radius:20px;
			font-size:16px;
			text-align: center;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(255,255,255,1);	
line-height: 44px;
margin-top: 100px;
			}
		.active{
				background: #FE6662;
				color: #FFFFFF;
			}
			.hangs{
					position: relative;
				float: left;
				width: 100%;
				height: 10px;
				background:rgba(248,248,248,1);
			}
			.apps,.appsd{
				position: relative;
				float: left;
				width: 100%;
				margin-top: 30px;
			}	
	</style>
	</head>
	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">充值会员</h1>
		</header>
		<div class="mui-content" id="content">
			<div class="head">
		
			</div>

             <div class="lastas">
				 <div>
				 充值会员
				 <div>
				 </div> 


		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.plusReady(function(){
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			var id = 0;
			user = JSON.parse(user);
			mui.post(url+'/juyou/huiyuans/getlist',{token:user.token},function(res){
				if(res.code==200){
					var str = '';
					mui.each(res.data,function(i,v){
						str+='<div class="dan" data-id="'+v.id+'">'+
								'<div>金币'+v.rmb+'</div>'+
								'<div>'+v.name+'</div>'+
							'</div>';
					})
					$(".head").append(str);
					
				}else{
					mui.alert(res.msg);
				}
			})
			mui.init({
			      beforeback: function() {   
					  var list = plus.webview.currentWebview().opener();
			     //获得列表界面的webview  var list = plus.webview.currentWebview().opener();
			      //触发列表界面的自定义事件（refresh）,从而进行数据刷新   
			      mui.fire(list, 'refresh');  
			     //返回true，继续页面关闭逻辑     return true;  
			     }  
			
			     });  
				 //选择商品
				mui(".head").on("tap",".dan",function(){
					id = $(this).attr('data-id');
					// mui.alert(id);
				$(this).addClass("active")
				$(this).children("div").css("color","#FFFFFF")
				$(this).siblings().removeClass("active")
				$(this).siblings().children("div:nth-child(1)").css("color","red")
				$(this).siblings().children("div:nth-child(2)").css("color","rgba(102,102,102,1)")
			})
			$(".lastas").on('tap',function(){
				
				if(!id){
					mui.toast('请选择商品');
					return
				}
				
			mui.confirm('你确定要充值会员吗？','提示',['取消','确认'],function (e) {
				if(e.index==1){
						$.post(url+'/juyou/huiyuans/chongzhihuiyuan',{token:user.token,id:id},function(res){
						if(res.code==200){
							mui.toast(res.msg);
							setTimeout(function(){
								mui.back();
							},1000)
						}else if(res.code==206){
							mui.toast(res.msg);
							setTimeout(function(){
								mui.openWindow({
									url:'huchongzhigold.html',
									id:'huchongzhigold.html'
									
								})
							},1000)
						}else{
							mui.toast(res.msg);
						}
					})

				}
			},'div')
				
			
			})
			
		})
	
		
	</script>
</html>
